<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <!-- <script src="../js/demo.js"></script> -->
    <script>

        console.log(1);

        // 加载事件 => 页面加载时只是先绑定加载事件(JS和浏览器约定好什么时候执行) => 页面所有内容加载完毕之后执行
        // window.onload = function () {
        //     console.log(2);
        //     var box = document.getElementsByClassName("box")[0];
        //     box.style.background = "red";
        // }
    </script>
    <style>
        html {
            width: 5000px;
            height: 5000px;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    console.log(3);

    // window相关的事件  => 页面相关的事件
    // onload    等页面所有内容加载完毕之后执行  (把代码放在页面加载之后执行)
    // onresize  窗口大小改变时执行执行 
    // onscroll  滚动事件 => 滚动条滚动时执行


    // 窗口大小改变时执行执行 
    resizeHandler();   //页面加载时执行一次
    window.onresize = resizeHandler;   // 窗口大小改变时再执行一次

    function resizeHandler() {
        console.log(window.innerWidth, window.innerHeight);
        if (window.innerWidth >= 1024) { // PC
            // document.body   快捷获取body
            document.body.style.backgroundColor = "pink";
        } else if (window.innerWidth >= 768) { // 平板
            // document.body   快捷获取body
            document.body.style.backgroundColor = "orange";
        } else if (window.innerWidth >= 320) { // 移动端
            // document.body   快捷获取body
            document.body.style.backgroundColor = "blue";
        } else {
            document.body.style.backgroundColor = "#000";
        }
    }



    window.onscroll = function () {
        console.log("滚动ing");
    }


</script>

</html>